<!DOCTYPE html>
<html>
<head>
  <title>简书</title>
  <link rel="stylesheet" type="text/css" href="css/jianshu.css">
  <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.3.1/css/all.css" integrity="sha384-mzrmE5qonljUremFsqc01SB46JvROS7bZs3IO2EmfFsd15uHvIt+Y8vEf7N7fWAU" crossorigin="anonymous">
</head>
<body>
<div class="wrap-container">
  <header class="upper-part">
    <div class="upper-container">
      <div class="upper-logo">
       <img src="https://cdn2.jianshu.io/assets/web/nav-logo-4c7bbafe27adc892f3046e6978459bac.png">
      </div>
      <nav class="upper-list">
         <ul class="list-ul">
            <li class="item-ul home"><i class="far fa-compass"></i>
            <a href="#">首页</a></li>
            <li class="item-ul download"><i class="far fa-arrow-alt-circle-down">
            </i><a href="#">下载App</a></li>
            <li class="item-ul search"><a href="#"><input type="text" name="search" value="搜索"></a><i class="fas fa-search"></i></li>
         </ul>
      </nav>
      <div class="upper-btn">
        <a href="#" class="btn-zt">Aa</a>
        <a href="#" class="btn-dl">登录</a>
        <a href="#" class="btn-zc">注册</a>
        <a href="#" class="btn-wz">写文章</a>
      </div>
  </header>
  <div class="middle-part">
    <div class="middle-left-item">
       <div class="left-item-banner">
         <img src="https://upload.jianshu.io/admin_banners/web_images/4502/25b524b6d1d21c508b7ca6a6a0a77ead48eed1b6.jpg?imageMogr2/auto-orient/strip|imageView2/1/w/1250/h/540">
       </div>
      <div class="left-item-btn">
        <div class="btn-container">
            <a href="#" class="collection"><img src="https://upload.jianshu.io/collections/images/4/sy_20091020135145113016.jpg?imageMogr2/auto-orient/strip|imageView2/1/w/64/h/64"><span class="collection-name">摄影</span></a>
           <a href="#" class="collection"><img src="https://upload.jianshu.io/collections/images/95/1.jpg?imageMogr2/auto-orient/strip|imageView2/1/w/64/h/64"><span class="collection-name">故事</span></a>
           <a href="#" class="collection"><img src="https://upload.jianshu.io/collections/images/21/20120316041115481.jpg?imageMogr2/auto-orient/strip|imageView2/1/w/64/h/64"><span class="collection-name">简书电影</span></a>
           <a href="#" class="collection"><img src="https://upload.jianshu.io/collections/images/14/6249340_194140034135_2.jpg?imageMogr2/auto-orient/strip|imageView2/1/w/64/h/64"><span class="collection-name">@IT互联网</span></a>
           <a href="#" class="collection"><img src="https://upload.jianshu.io/collections/images/76/12.jpg?imageMogr2/auto-orient/strip|imageView2/1/w/64/h/64"><span class="collection-name">自然科普</span></a>
           <a href="#" class="collection"><img src="https://upload.jianshu.io/collections/images/4/sy_20091020135145113016.jpg?imageMogr2/auto-orient/strip|imageView2/1/w/64/h/64"><span class="collection-name">读书</span></a>
           <a href="#" class="collection"><img src="https://upload.jianshu.io/collections/images/13/%E5%95%8A.png?imageMogr2/auto-orient/strip|imageView2/1/w/64/h/64"><span class="collection-name">旅行在路上</span></a>
           <a href="#" class="collection-hot">更多热门主题></a>
        </div>
      </div>
      <div class="left-item-summary">
        <div class="summary">
          <div class="text-item">
          <a href="#" class="title">我是个标题、我就是个标题还是大的标题</a>
          <p>探索营销心理学，深入互联网思维，分析赚钱思路，分享创业项目，就在：玩家老高！祝大家早日实现财富自由！‍ </p>
          <p>nomi</p>
          </div>
          <div class="img-item">
          <img src="https://upload-images.jianshu.io/upload_images/4149621-ea695a928574be55.jpg?imageMogr2/auto-orient/strip|imageView2/1/w/300/h/240">
          </div>
        </div>
        <div class="summary">
          <div class="text-item">
          <a href="#" class="title">我是个标题、我就是个标题还是大的标题</a>
          <p>探索营销心理学，深入互联网思维，分析赚钱思路，分享创业项目，就在：玩家老高！祝大家早日实现财富自由！‍ </p>
          <p>nomi</p>
          </div>
          <div class="img-item">
          <img src="https://upload-images.jianshu.io/upload_images/12309992-86717ee9741ea970.jpg?imageMogr2/auto-orient/strip|imageView2/1/w/300/h/240">
          </div>
        </div>
        <div class="summary">
          <div class="text-item" class="title">
         <a href="#" class="title">我是个标题、我就是个标题还是大的标题</a>
          <p>探索营销心理学，深入互联网思维，分析赚钱思路，分享创业项目，就在：玩家老高！祝大家早日实现财富自由！‍ </p>
          <p>nomi</p>
          </div>
          <div class="img-item">
          <img src="https://upload-images.jianshu.io/upload_images/3342617-2703979d8d10a431.png?imageMogr2/auto-orient/strip|imageView2/1/w/300/h/240">
          </div>
        </div>
        <div class="summary">
          <div class="text-item" class="title">
         <a href="#" class="title">我是个标题、我就是个标题还是大的标题</a>
          <p>探索营销心理学，深入互联网思维，分析赚钱思路，分享创业项目，就在：玩家老高！祝大家早日实现财富自由！‍ </p>
          <p>nomi</p>
          </div>
          <div class="img-item">
          <img src="https://upload-images.jianshu.io/upload_images/3342617-2703979d8d10a431.png?imageMogr2/auto-orient/strip|imageView2/1/w/300/h/240">
          </div>
        </div>
      </div>
      <div class="load-more">
      <a href="#">加载更多</a>
      </div>
      </div>
      <div class="middle-right-item">
         <div class="right-item-subnav">
            <a href="#" class="subnav"><img src="https://cdn2.jianshu.io/assets/web/banner-s-3-7123fd94750759acf7eca05b871e9d17.png"></a>
            <a href="#" class="subnav"><img src="https://cdn2.jianshu.io/assets/web/banner-s-4-b70da70d679593510ac93a172dfbaeaa.png"></a>
            <a href="#" class="subnav"><img src="https://cdn2.jianshu.io/assets/web/banner-s-7-1a0222c91694a1f38e610be4bf9669be.png"></a>
            <a href="#" class="subnav"><img src="https://cdn2.jianshu.io/assets/web/banner-s-5-4ba25cf5041931a0ed2062828b4064cb.png"></a>
            <a href="#" class="subnav"><img src="https://cdn2.jianshu.io/assets/web/banner-s-6-c4d6335bfd688f2ca1115b42b04c28a7.png"></a>
        </div>
        <div class="right-item-qrcode">
          <div class="qrcode-container">
            <img src="https://cdn2.jianshu.io/assets/web/download-index-side-qrcode-cb13fc9106a478795f8d10f9f632fccf.png">
            <div class="qrcode-item">
                <p class="item-xz">下载简书手机App ></p>
                <p class="item-cz">随时随地发现创作内容</p>
            </div>
          </div>
        </div>
        <div class="right-item-list">
          <div class="list-search">
            <p>推荐作者</p>
            <a href="#"><i class="fas fa-sync-alt"></i> 换一换</a>
          </div>
          <div class="list-container">
            <div class="list-container-item">
              <div class="content">
                <img src="https://upload.jianshu.io/users/upload_avatars/5545154/1a3d5ed6-9ad1-44b3-9457-3e6a29dd1b71.jpg?imageMogr2/auto-orient/strip|imageView2/1/w/96/h/96/format/webp">
                <div class="content-name">
                  <h5>诺米nomi</h3>
                  <p>写了497.8k字 没有人喜欢</p>
                </div>
                <a href="#" class="follow">+ 关注</a>
            </div>
          </div>
          <div class="list-container-item">
            <div class="content">
              <img src="https://upload.jianshu.io/users/upload_avatars/13213889/7314c5cc-ca7f-4542-b914-2c8dffaf324d.jpg?imageMogr2/auto-orient/strip|imageView2/1/w/96/h/96/format/webp">
                <div class="content-name">
                <h5>诺米nomi</h3>
                <p>写了497.8k字 没有人喜欢</p>
                </div>
                <a href="#" class="follow">+ 关注</a>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
  <div class="bottom-part">
    <div class="bottom-container">
      <div class="bottom-list">
        <a href="#">关于简书</a>·
        <a href="#">联系我们</a>·
        <a href="#">加入我们</a>·
        <a href="#">简书出版</a>·
        <a href="#">品牌与微标</a>·
        <a href="#">帮助中心</a>·
        <a href="#">合作伙伴</a>
      </div>
      <div class="bottom-copy">
        ©2012-2018 上海佰集信息科技有限公司/简书/沪ICP备11018329号-5沪公网安备31010402002252号
      </div>
    </div>
  </div>
 </div>
</body>
</html>